import { Document, Font, Image, PDFViewer, Page, StyleSheet, Text, View, pdf } from '@react-pdf/renderer';
import { useEffect } from "react";
import ReactDOM from "react-dom";
import print from 'print-js';
import QRCode from 'qrcode';

const Test = () => {

  Font.register({
    family: 'song', fonts: [
      { src: '/fonts/ShuSong.ttf' }
    ]
  });

  const styles = StyleSheet.create({
    // page: {
    //   flexDirection: 'column',
    //   backgroundColor: '#E4E4E4'
    // },
    title: {
      fontSize: 15,
      fontWeight: 'bold',
      textAlign: 'center',
      margin: '8 0 20'
    },
    subTitle: {
      fontSize: 10.5,
      width: '30%'
    },
    rowDirection: {
      flexDirection: 'row'
    },
    tableColumn: {
      borderRight: 0.5,
      padding: 3,
      width: '8.5%'
    }
  });

  // Create Document Component
  const BillPDF = ({ qrCode }: { qrCode: string }) => {
    return <Document>
      <Page size="A5" orientation='landscape' style={{ padding: 16, fontFamily: 'song' }}>
        <Text style={styles.title}>票据单</Text>
        <View style={styles.rowDirection}>
          <View style={{ flexDirection: 'column' }}>
            <View style={[styles.rowDirection, { paddingBottom: 3 }]}>
              <Text style={[styles.subTitle, { width: '37%' }]}>单据号：20212021202120212021</Text>
              <Text style={[styles.subTitle, { width: '28%' }]}>归属科室：眼视光中心</Text>
              <Text style={styles.subTitle}>科室电话：0736-7788032</Text>
            </View>
            <View style={[styles.rowDirection, { paddingTop: 3 }]}>
              <Text style={[styles.subTitle, { width: '37%' }]}>患者姓名：王某某</Text>
              <Text style={[styles.subTitle, { width: '28%' }]}>手机号：15012345678</Text>
              <Text style={styles.subTitle}>身份证/住院号：430******001</Text>
            </View>
          </View>
          <Image src={qrCode} style={{ width: 74, height: 60, marginTop: -32, paddingLeft: 4 }} />
        </View>
        <View style={{ marginTop: 6, border: 0.5, fontSize: 10, textAlign: 'center' }}>
          <Text style={{ borderBottom: 0.5, padding: 3 }}>
            商品信息
          </Text>
          <View style={[styles.rowDirection, { borderBottom: 0.5 }]}>
            <Text style={[styles.tableColumn, { width: '10%' }]}>分类</Text>
            <Text style={[styles.tableColumn, { width: '10%' }]}>品牌</Text>
            <Text style={[styles.tableColumn, { width: '10%' }]}>商品名称</Text>
            <Text style={[styles.tableColumn, { width: '14%' }]}>商品编号</Text>
            <Text style={[styles.tableColumn, { width: '20%' }]}>规格（单位）</Text>
            <Text style={[styles.tableColumn, { width: '8%' }]}>单价</Text>
            <Text style={[styles.tableColumn, { width: '6%' }]}>数量</Text>
            <Text style={[styles.tableColumn, { width: '8%' }]}>原价</Text>
            <Text style={[styles.tableColumn, { width: '6%' }]}>折扣</Text>
            <Text style={[styles.tableColumn, { width: '8%', borderRight: 0 }]}>折扣价</Text>
          </View>
          <View style={[styles.rowDirection, { borderBottom: 0.5 }]}>
            <Text style={[styles.tableColumn, { width: '10%' }]}>&nbsp;</Text>
            <Text style={[styles.tableColumn, { width: '10%' }]}></Text>
            <Text style={[styles.tableColumn, { width: '10%' }]}></Text>
            <Text style={[styles.tableColumn, { width: '14%' }]}></Text>
            <Text style={[styles.tableColumn, { width: '20%' }]}></Text>
            <Text style={[styles.tableColumn, { width: '8%' }]}></Text>
            <Text style={[styles.tableColumn, { width: '6%' }]}></Text>
            <Text style={[styles.tableColumn, { width: '8%' }]}></Text>
            <Text style={[styles.tableColumn, { width: '6%' }]}></Text>
            <Text style={[styles.tableColumn, { width: '8%', borderRight: 0 }]}></Text>
          </View>
          <View style={[styles.rowDirection]}>
            <Text style={[styles.tableColumn, { width: '10%' }]}>&nbsp;</Text>
            <Text style={[styles.tableColumn, { width: '10%' }]}></Text>
            <Text style={[styles.tableColumn, { width: '10%' }]}></Text>
            <Text style={[styles.tableColumn, { width: '14%' }]}></Text>
            <Text style={[styles.tableColumn, { width: '20%' }]}></Text>
            <Text style={[styles.tableColumn, { width: '8%' }]}></Text>
            <Text style={[styles.tableColumn, { width: '6%' }]}></Text>
            <Text style={[styles.tableColumn, { width: '8%' }]}></Text>
            <Text style={[styles.tableColumn, { width: '6%' }]}></Text>
            <Text style={[styles.tableColumn, { width: '8%', borderRight: 0 }]}></Text>
          </View>
        </View>
        <View style={{ marginTop: 9, border: 0.5, fontSize: 10, textAlign: 'center' }}>
          <View style={[styles.rowDirection, { borderBottom: 0.5 }]}>
            <Text style={[styles.tableColumn, { width: '10%' }]}>眼别</Text>
            <Text style={styles.tableColumn}>球镜</Text>
            <Text style={styles.tableColumn}>柱镜</Text>
            <Text style={styles.tableColumn}>轴位</Text>
            <Text style={[styles.tableColumn, { width: '11%' }]}>矫正前视力</Text>
            <Text style={[styles.tableColumn, { width: '11%' }]}>矫正后视力</Text>
            <Text style={styles.tableColumn}>离焦量</Text>
            <Text style={styles.tableColumn}>瞳距</Text>
            <Text style={styles.tableColumn}>总瞳距</Text>
            <Text style={styles.tableColumn}>瞳高</Text>
            <Text style={[styles.tableColumn, { borderRight: 0 }]}>瞳高总</Text>
          </View>
          <View style={[styles.rowDirection, { borderBottom: 0.5 }]}>
            <Text style={[styles.tableColumn, { width: '10%' }]}>右眼 (R)</Text>
            <Text style={styles.tableColumn}>-12.75</Text>
            <Text style={styles.tableColumn}></Text>
            <Text style={styles.tableColumn}></Text>
            <Text style={[styles.tableColumn, { width: '11%' }]}></Text>
            <Text style={[styles.tableColumn, { width: '11%' }]}></Text>
            <Text style={styles.tableColumn}></Text>
            <Text style={styles.tableColumn}></Text>
            <Text style={styles.tableColumn}></Text>
            <Text style={styles.tableColumn}></Text>
            <Text style={[styles.tableColumn, { borderRight: 0 }]}></Text>
          </View>
          <View style={[styles.rowDirection, { borderBottom: 0.5 }]}>
            <Text style={[styles.tableColumn, { width: '10%' }]}>左眼 (L)</Text>
            <Text style={styles.tableColumn}></Text>
            <Text style={styles.tableColumn}></Text>
            <Text style={styles.tableColumn}></Text>
            <Text style={[styles.tableColumn, { width: '11%' }]}></Text>
            <Text style={[styles.tableColumn, { width: '11%' }]}></Text>
            <Text style={styles.tableColumn}></Text>
            <Text style={styles.tableColumn}></Text>
            <Text style={styles.tableColumn}></Text>
            <Text style={styles.tableColumn}></Text>
            <Text style={[styles.tableColumn, { borderRight: 0 }]}></Text>
          </View>
          <View style={[styles.rowDirection]}>
            <Text style={[styles.tableColumn, { textAlign: 'left', width: '46.5%', paddingLeft: 6 }]}>用途：近用</Text>
            <Text style={[styles.tableColumn, { textAlign: 'left', width: '53.5%', borderRight: '0', paddingLeft: 6 }]}>ADD：12</Text>
          </View>
        </View>
        <View style={[styles.rowDirection, { marginTop: 9, border: 0.5, fontSize: 10, textAlign: 'center' }]}>
          <Text style={[styles.tableColumn, { width: '10%', paddingTop: 13 }]}>
            镜架信息
          </Text>
          <View style={{ width: '90%' }}>
            <View style={[styles.rowDirection, { borderBottom: 0.5 }]}>
              <Text style={[styles.tableColumn, { width: '12%' }]}>框宽</Text>
              <Text style={[styles.tableColumn, { width: '12%' }]}>框高</Text>
              <Text style={[styles.tableColumn, { width: '12%' }]}>中梁</Text>
              <Text style={[styles.tableColumn, { width: '14%' }]}>镜对角直径</Text>
              <Text style={[styles.tableColumn, { width: '16%' }]}>型号</Text>
              <Text style={[styles.tableColumn, { width: '16%' }]}>框型</Text>
              <Text style={[styles.tableColumn, { width: '18%', borderRight: 0 }]}>是否需要防滑套</Text>
            </View>
            <View style={[styles.rowDirection]}>
              <Text style={[styles.tableColumn, { width: '12%' }]}>&nbsp;</Text>
              <Text style={[styles.tableColumn, { width: '12%' }]}></Text>
              <Text style={[styles.tableColumn, { width: '12%' }]}></Text>
              <Text style={[styles.tableColumn, { width: '14%' }]}></Text>
              <Text style={[styles.tableColumn, { width: '16%' }]}></Text>
              <Text style={[styles.tableColumn, { width: '16%' }]}></Text>
              <Text style={[styles.tableColumn, { width: '18%', borderRight: 0 }]}></Text>
            </View>
          </View>
        </View>
        <View style={[styles.rowDirection, { padding: '6 0', fontSize: 10, borderBottom: 0.5 }]}>
          <Text style={{ width: '40%' }}>眼光号：20212021202120212021</Text>
          <Text style={{ width: '30%' }}>就诊医生：李某某</Text>
          <Text>验光师：张某某</Text>
        </View>
        <View style={{ fontSize: 10 }}>
          <View style={[styles.rowDirection, { padding: '9 0 3' }]}>
            <Text style={{ width: '28%' }}>订单编号：<Text style={{ fontSize: 9.5 }}>20212021202120212021</Text></Text>
            <Text style={{ width: '28%' }}>创建时间：<Text style={{ fontSize: 9.5 }}>2023-11-03 23:59:59</Text></Text>
            <Text style={{ width: '22%' }}>订单状态：李某某</Text>
            <Text style={{}}>发票：李某某</Text>
          </View>
          <View style={[styles.rowDirection, { padding: '3 0' }]}>
            <Text style={{ width: '28%' }}>商品原价：123456（元）</Text>
            <Text style={{ width: '28%' }}>商品数量：999（件）</Text>
            <Text style={{ width: '22%' }}>订单金额：123456（元）</Text>
            <Text style={{}}>订单折扣：1.0</Text>
          </View>
          <View style={[styles.rowDirection, { padding: '3 0' }]}>
            <Text style={{ width: '28%' }}>应收款：123456（元）</Text>
            <Text style={{ width: '28%' }}>欠款：999（件）</Text>
            <Text style={{ width: '22%' }}>邮寄费：123456（元）</Text>
            <Text style={{}}>结算价格：123456（元）</Text>
          </View>
          <View style={[styles.rowDirection, { padding: '3 0' }]}>
            <Text style={{ width: '28%' }}>收件人：123456</Text>
            <Text style={{ width: '28%' }}>收件人电话：999（件）</Text>
            <Text style={{}}>收件人地址：<Text style={{ fontSize: 9 }}>湖南省常德市某某某县某某某村某某某接到</Text></Text>
          </View>
        </View>
      </Page>
    </Document>
  };

  const App = ({ qrCode }: any) => (
    <div style={{ textAlign: 'center' }}>
      <PDFViewer width={950} height={1180}>
        <BillPDF qrCode={qrCode} />
      </PDFViewer>
    </div>
  );

  useEffect(() => {
    // setTimeout(() => {
    //   renderPdf();
    // }, 100);
    init();
  }, []);

  const init = async () => {
    const codeStr = await QRCode.toDataURL('https://www.google.com', { margin: 0 });
    ReactDOM.render(<App qrCode={codeStr} />, document.getElementById('root'));
  }

  const renderPdf = async () => {
    const codeStr = await QRCode.toDataURL('https://www.google.com', { margin: 0 });
    const blob = await pdf(<BillPDF qrCode={codeStr} />).toBlob();
    print(URL.createObjectURL(blob));
  };

  return <>
    {/* <MyDocument /> */}
  </>;

}

export default Test;
